<template>
  <div class="page_padding">
    <!-- 个人绩效详情 -->
    <MyNavBar @goback="goback" :title="'季度绩效考核结果'" />
    <div class="score_cont">
      <div class="cont_tit">
        <van-row>
          <van-col span="4">
            <div class="peoIcon iconfont icon-touxiang6"></div>
          </van-col>
          <van-col span="20" class="info_deta">
            <p>
              {{ infoData.name }}
              <span>{{ infoData.organName }}</span>
            </p>
            <p>{{ infoData.title }}</p>
          </van-col>
        </van-row>
      </div>
      <div class="atlas">
        <p class="atlas_tit">
          <span>绩效考核评分结果</span>
          <img src="../../assets/images/merits/hint.png" alt="" />
        </p>
        <div class="atlas_cont">
          <div class="atlas_cont_lf">
            <p>{{ infoData.totalScore }}</p>
            <p>绩效得分</p>
          </div>
          <div class="atlas_cont_rt">
            <span>{{ infoData.scoreLevel | ScoreLevel }}</span>
            <p>绩效等次</p>
          </div>
        </div>
        <div>
          <div id="main"></div>
        </div>
      </div>
      <div class="atlas_detail" v-if="show">
        <p class="atlas_tit">
          <span>绩效考核结果分析</span>
        </p>
        <p class="analyse">
          本季度综合16个机关科员的考核结果情况分析，您在履职能力方面的得分较高，比上个季度提升了5分。工作实效方面略低，主要问题集中在任务完成、积极响应、创新创优、改革攻坚、应急处突方面。
        </p>
      </div>
      <div class="atlas_particulars" v-if="show">
        <van-collapse v-model="activeNames">
          <van-collapse-item name="1">
            <template #title>
              <p class="atlas_tit">
                <span>绩效考核结果明细</span>
              </p>
            </template>
            <table class="atlas_table" border="1">
              <thead>
                <tr>
                  <th>一级指标</th>
                  <th>一级指标</th>
                  <th>三级指标</th>
                  <th>具体得分</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="7">
                    <p>政治素质</p>
                    <p>(30分)</p>
                  </td>
                  <td rowspan="2">
                    <p>政治品质</p>
                    <p>(10分)</p>
                  </td>
                  <td>
                    <p>政治信念</p>
                    <p>(5分)</p>
                  </td>
                  <td><p>5</p></td>
                </tr>
                <tr>
                  <td>
                    <p>政治担当</p>
                    <p>(10分)</p>
                  </td>
                  <td><p>5</p></td>
                </tr>
                <tr>
                  <td rowspan="3">
                    <p>政治品质</p>
                    <p>(10分)</p>
                  </td>
                  <td>
                    <p>社会公益</p>
                    <p>(4分)</p>
                  </td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>
                    <p>个人品德</p>
                    <p>(3分)</p>
                  </td>
                  <td>3</td>
                </tr>
                <tr>
                  <td>
                    <p>政务诚信</p>
                    <p>(3分)</p>
                  </td>
                  <td>3</td>
                </tr>
                <tr>
                  <td rowspan="2">
                    <p>廉洁从政</p>
                    <p>(10分)</p>
                  </td>
                  <td>
                    <p>秉公用权</p>
                    <p>(5分)</p>
                  </td>
                  <td>5</td>
                </tr>
                <tr>
                  <td>
                    <p>廉洁自律</p>
                    <p>(5分)</p>
                  </td>
                  <td>5</td>
                </tr>
                <!-- 分割 -->
                <tr>
                  <td rowspan="7">
                    <p>履职能力</p>
                    <p>(30分)</p>
                  </td>
                  <td rowspan="2">
                    <p>学习能力</p>
                    <p>(7分)</p>
                  </td>
                  <td>
                    <p>学习目标计划</p>
                    <p>(2分)</p>
                  </td>
                  <td><p>1.5</p></td>
                </tr>
                <tr>
                  <td>
                    <p>学习心得体会</p>
                    <p>(5分)</p>
                  </td>
                  <td><p>4.5</p></td>
                </tr>
                <tr>
                  <td rowspan="3">
                    <p>业务素质</p>
                    <p>(8分)</p>
                  </td>
                  <td>
                    <p>业务知识</p>
                    <p>(3分)</p>
                  </td>
                  <td>3</td>
                </tr>
                <tr>
                  <td>
                    <p>文字表达</p>
                    <p>(2分)</p>
                  </td>
                  <td>1.5</td>
                </tr>
                <tr>
                  <td>
                    <p>沟通协调</p>
                    <p>(3分)</p>
                  </td>
                  <td>2.5</td>
                </tr>
                <tr>
                  <td rowspan="2">
                    <p>业务技巧</p>
                    <p>(8分)</p>
                  </td>
                  <td>
                    <p>政策把握</p>
                    <p>(4分)</p>
                  </td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>
                    <p>调查研究</p>
                    <p>(4分)</p>
                  </td>
                  <td>4</td>
                </tr>
              </tbody>
            </table>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
export default {
  name: 'personalMerits',
  props: {},
  data() {
    return {
      show: false,
      infoData: {},
      activeNames: ['1'],
      tablecell: [
        {
          fir: '政治素质',
          num: 30,
          child: [
            {
              name: '政治品质',
              num: 10,
              child: [
                { name: '政治信念', num: 5 },
                { name: '政治担当', num: 5 },
              ],
            },
            {
              name: '道德品行',
              num: 10,
              child: [
                { name: '社会公益', num: 4 },
                { name: '个人品德', num: 3 },
                { name: '政务诚信', num: 3 },
              ],
            },
            {
              name: '廉洁从政',
              num: 10,
              child: [
                { name: '秉公用权', num: 5 },
                { name: '廉洁自律', num: 5 },
              ],
            },
          ],
        },
        {
          fir: '政治素质',
          num: 30,
          child: [
            {
              name: '政治品质',
              num: 10,
              child: [
                { name: '政治信念', num: 5 },
                { name: '政治担当', num: 5 },
              ],
            },
            {
              name: '道德品行',
              num: 10,
              child: [
                { name: '社会公益', num: 4 },
                { name: '个人品德', num: 3 },
                { name: '政务诚信', num: 3 },
              ],
            },
            {
              name: '廉洁从政',
              num: 10,
              child: [
                { name: '秉公用权', num: 5 },
                { name: '廉洁自律', num: 5 },
              ],
            },
          ],
        },
      ],
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.infoData = { ...this.infoData, ...JSON.parse(this.$route.query.itemData) }
    this.drawChart()
  },
  watch: {},
  filters: {
    ScoreLevel(val) {
      switch (val) {
        case '':
          return '无'
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        default:
          break
      }
    },
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById('main'))
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        radar: [
          {
            indicator: [
              { text: '政治素质', max: 30 },
              { text: '履职能力', max: 30 },
              { text: '作风表现', max: 10 },
              { text: '工作实绩', max: 40 },
            ],
            center: ['50%', '46%'],
            radius: 100,
            name: {
              color: '#333',
              fontSize: '26px',
            },
          },
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item',
            },
            itemStyle: {
              normal: {
                color: '#ad7316',
              },
            },
            areaStyle: {},
            data: [
              {
                value: [26.8, 28, 10, 33],
                name: '工作绩效',
                areaStyle: {
                  normal: {
                    color: '#e5d2b4', // 选择区域颜色
                  },
                },
                lineStyle: {
                  color: '#e5d2b4', // 雷达构成的区域边框
                },
              },
            ],
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value
                },
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
  components: {
    MyNavBar,
  },
}
</script>

<style lang="scss" scoped>
.page_padding {
  background: #f5f5f5;
  .score_cont {
    .cont_tit {
      padding: 12px 16px 7px 16px;
      background: #fff;
      // 局长
      .oragn_top {
        line-height: 0;
        padding: 0;
        margin-top: 10px;
        .organIcon {
          width: 16px;
          height: 14px;
        }
        .organTxt {
          color: #ad7316;
          // font-size: 14px;
          margin-left: 8px;
        }
        .organ_name {
          color: #666;
          // font-size: 14px;
          margin-left: 16px;
        }
      }
      .info_organ {
        margin-top: 10px;
        padding-bottom: 20px;
      }

      .cont_tit div {
        height: 15px;
      }
      .info_organ {
        color: #333333;
        font-size: 13px;
      }
      .peoIcon {
        width: 45px;
        height: 45px;
        line-height: 45px;
        margin: 0 auto;
        font-size: 100px;
        color: #efe3e3;
      }
      .info_deta {
        p {
          margin-top: 8px;
        }
        & p:nth-child(1) {
          color: #ad7316;
          // font-size: 14px;
          span {
            color: #666666;
            font-size: 13px;
          }
        }
        & p:nth-child(2) {
          color: #333333;
          font-size: 13px;
        }
      }
    }
    .atlas {
      background: #fff;
      border-top: 1px solid #efefef;
      padding: 0 16px 0 16px;
      .atlas_tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        span {
          color: #333333;
          font-size: 14px;
          background-image: linear-gradient(180deg, #fff8ed 0%, #e5d2b4 100%);
          background-size: 100% 50%;
          background-repeat: no-repeat;
          background-position: bottom;
        }
        img {
          width: 16px;
          height: 16px;
          float: right;
        }
      }
      .atlas_cont {
        display: flex;
        padding: 24px 0;
        align-items: flex-end;
        & div {
          width: 50%;
        }
        .atlas_cont_lf {
          text-align: center;
          & p:nth-child(1) {
            color: #ad7316;
            font-size: 30px;
          }
          & p:nth-child(2) {
            color: #999;
            font-size: 13px;
            margin-top: 11px;
          }
        }
        .atlas_cont_rt {
          text-align: center;
          span {
            display: block;
            width: 36px;
            height: 20px;
            background-image: linear-gradient(0deg, #ebd3ab 0%, #fff2dc 100%);
            border-radius: 4px;
            font-size: 13px;
            color: #9f814b;
            text-align: center;
            line-height: 20px;
            border: 1px solid #987a45;
            margin: 0 auto;
            margin-top: 5px;
          }
          p {
            color: #999;
            font-size: 13px;
            margin-top: 16px;
          }
        }
      }
      #main {
        width: 100%;
        height: 250px;
        text-align: center;
      }
    }
    .atlas_detail {
      background: #fff;
      margin-top: 8px;
      padding: 0 16px 20px 16px;
      .atlas_tit {
        span {
          color: #333333;
          font-size: 14px;
          background-image: linear-gradient(180deg, #fff8ed 0%, #e5d2b4 100%);
          background-size: 100% 50%;
          background-repeat: no-repeat;
          background-position: bottom;
        }
        img {
          width: 16px;
          height: 16px;
          float: right;
          margin-top: 15px;
        }
      }
      .analyse {
        color: #333333;
        font-size: 14px;
        line-height: 25px;
        margin-top: 10px;
      }
    }
    .atlas_particulars {
      background: #fff;
      margin-top: 8px;
      padding: 0 16px 20px 16px;
      .atlas_tit {
        span {
          color: #333333;
          font-size: 14px;
          background-image: linear-gradient(180deg, #fff8ed 0%, #e5d2b4 100%);
          background-size: 100% 50%;
          background-repeat: no-repeat;
          background-position: bottom;
        }
        img {
          width: 16px;
          height: 16px;
          float: right;
          margin-top: 15px;
        }
      }
      /deep/.van-cell {
        padding: 5px 0;
      }
      /deep/.van-cell::after {
        border-bottom: none;
      }
      /deep/.van-collapse-item__content {
        padding: 0;
      }
      .atlas_table {
        border-collapse: collapse;
        width: 100%;
        margin-top: 12px;
        tr th {
          font-size: 13px;
          background: #fdeed7;
          font-weight: normal;
          color: #666666;
          padding: 9px 0;
        }
        table,
        td,
        th {
          border: 1px solid #dedede;
          text-align: center;
          padding: 6px 6px;
        }
      }
    }
  }
}
</style>
